<template>
  <el-table
    :data="tableData"
    height="250"
    border
    style="width: 100%"
    class="custom-table">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    name: 'Table',
    data() {
      return {
        tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }]
      }
    }
  }
</script>

<style>
.el-table, .el-table__expanded-cell {
  background-color: transparent !important;
}


/* 自定义表头背景颜色和透明度 */
.custom-table .el-table__header-wrapper {
  background-color: rgba(128, 128, 128, 0.5); /* 灰色 + 半透明 */
}

/* 表头字体颜色 */
.custom-table th {
  color: white;
}

/* 表格每一行的背景颜色和透明度 */
.custom-table .el-table__body-wrapper tbody tr {
  background-color: rgba(128, 128, 128, 0.2); /* 灰色 + 透明度 */
}

/* 表格行鼠标悬停时的背景颜色 */
.custom-table .el-table__body-wrapper tbody tr:hover {
  background-color: rgba(128, 128, 128, 0.3); /* 灰色 + 透明度增加 */
}

/* 表格内容字体颜色 */
.custom-table td {
  color: white;
}
</style>
